#171 Source Card Content#178
Draft
SharonStrats wants to merge 12 commits into
Draft
Conversation
AI was used to for the Header which will be rewritten in another ticket Prompt: Make the lit html and the dom manipulation work together in Header.ts Co-authored-by: Model GPT5.4 <copilot@github.com>
will see about exporting it from solid-ui later
Prompt: Add tests for the current editor flow in SourceEditor, SourceEditorCard, and helpers. Cover initialization, read-only toggling, replace-content behavior, metadata/header handling, and the pane button visibility logic. Remove or replace any skipped tests that are now stale. Keep the tests focused on the current implementation, not the old textarea-based flow. After editing, run the test suite and fix any failing assertions. Co-authored-by: GPT-5.4 mini <gpt-5.4-mini@openai.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR modernizes the Source Pane by migrating the implementation from a legacy DOM/textarea approach to a Lit + TypeScript component structure, introducing a CodeMirror 6-based editor, and updating the build pipeline and tests accordingly.
Changes:
- Replaced
src/sourcePane.jswith a new Lit-renderedsrc/sourcePane.tsplus supporting modules (Header,helpers,StatusSection, types). - Added a CodeMirror-backed
SourceEditorand asource-editor-cardweb component with Lit CSS module styling. - Updated Webpack/Babel/PostCSS setup for TypeScript + Lit decorators +
*.styles.css, and refreshed/added Jest tests.
Reviewed changes
Copilot reviewed 26 out of 29 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.module.rules.mjs | Adds lit-css-loader rule for *.styles.css and adjusts CSS rule exclusions. |
| webpack.config.mjs | Switches webpack entry to TypeScript source pane entry and removes copy step. |
| tsconfig.json | Introduces TS project configuration for the new TypeScript code. |
| test/sourcePane.test.js | Refactors tests to assert control visibility classes and edit behavior. |
| test/sourceEditorCard.test.js | Adds tests for the SourceEditorCard component (mocking editor + helpers). |
| test/sourceEditor.test.js | Adds tests for the CodeMirror-backed SourceEditor (via module mocks). |
| test/helpers.test.js | Adds unit tests for helper functions (headers parsing, fetch/metadata, UI toggling). |
| src/types.ts | Adds shared metadata/state types for the pane. |
| src/StatusSection.ts | Adds a Lit-rendered status/error section with show/clear helpers. |
| src/StatusSection.css | Styles status section visibility and error message presentation. |
| src/sourcePane.ts | New TypeScript Lit-based pane entry and render implementation. |
| src/sourcePane.js | Removes legacy textarea-based implementation. |
| src/sourcePane.css | Updates layout/styling to match the new component structure. |
| src/SourceEditor.ts | Adds CodeMirror 6-based editor wrapper with language selection. |
| src/primitives/WebComponent.ts | Adds a LitElement base with ElementInternals “states” support. |
| src/helpers.ts | Extracts shared behaviors: response header parsing, syntax checking, control toggling, content fetch. |
| src/Header.ts | Implements header controls (Edit/Compact/Save) for the new UI. |
| src/debug.ts | Adds centralized log/warn/error helpers. |
| src/components/sourceEditor/SourceEditorCard.ts | Adds the source-editor-card Lit web component integrating fetch + editor initialization. |
| src/components/sourceEditor/SourceEditorCard.styles.css | Adds Lit CSS-module styles for the editor card presentation. |
| src/compactableFormats.ts | Extracts compactable content-type map into its own module. |
| package.json | Adds CodeMirror deps and build tooling for TS + Lit decorators + PostCSS/Tailwind + lit-css-loader. |
| package-lock.json | Lockfile updates for newly added dependencies. |
| jest.config.mjs | Broadens the ESM transform allowlist for Lit packages. |
| dev/index.js | Updates the dev target URI used when rendering the pane locally. |
| declarations.d.ts | Adds typings for *.styles.css and generic *.css imports. |
| config/postcss.mjs | Adds PostCSS pipeline (Tailwind PostCSS plugin) for lit-css-loader transforms. |
| config/babel.mjs | Adds Babel options/overrides for Lit decorators usage in selected paths. |
| babel.config.mjs | Enables TypeScript preset and Lit decorators overrides in Babel config. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Comment on lines
+16
to
+28
| const [ | ||
| { EditorState }, | ||
| { drawSelection, keymap, lineNumbers }, | ||
| { defaultHighlightStyle, syntaxHighlighting }, | ||
| { defaultKeymap, history, historyKeymap }, | ||
| { oneDark } | ||
| ] = await Promise.all([ | ||
| import(/* webpackChunkName: "codemirror-core" */ '@codemirror/state'), | ||
| import(/* webpackChunkName: "codemirror-core" */ '@codemirror/view'), | ||
| import(/* webpackChunkName: "codemirror-core" */ '@codemirror/language'), | ||
| import(/* webpackChunkName: "codemirror-core" */ '@codemirror/commands'), | ||
| import(/* webpackChunkName: "codemirror-core" */ '@codemirror/theme-one-dark') | ||
| ]) |
Contributor
Author
There was a problem hiding this comment.
Leaving this for the moment, because I'm not sure what we will do yet with the styling.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.